<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>首页</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <link href="layui-v2.6.4/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="layui-v2.6.4/layui/css/modules/code.css" rel="stylesheet" type="text/css"/>
    <script charset="utf-8" src="layui-v2.6.4/layui/layui.js" type="text/javascript"></script>
    <script>
        layui.use('element', function () {
            var element = layui.element;
        });
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #dome {
            width: 200px;
            height: 330px;
            overflow: hidden;
            border: 1px solid #626060;
            margin: 0px auto;
            padding: 0px 10px;
        }

        #dome li {
            padding: 6px 0px;
        }

        #domex {
            width: 200px;
            height: 330px;
            overflow: hidden;
            border: 1px solid #626060;
            margin: 0px auto;
            padding: 0px 10px;
        }

        #domex li {
            padding: 6px 0px;
        }
    </style>
</head>
<body>

<div class="div_top" th:replace="include/top"></div>
<!--
    作者：offline
    时间：2021-05-18
    描述：轮播图
-->
<div class="layui-row">
    <div class="layui-col-md2 layui-col-xs2" style="height:360px;overflow: hidden;background-color: #ddd7d7">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;border-color: #3e0656;">
            <legend>热点新闻</legend>
        </fieldset>
        <div id="dome">
            <div id="dome1">
                <ul>
                    <li style="color:red;">2010考研英语大纲到货75折...</li>
                    <li>权威定本四大名著（人民文...</li>
                    <li>口述历史权威唐德刚先生国...</li>
                    <li>袁伟民与体坛风云：实话实...</li>
                    <li>两岸关系这些年：轰动两岸...</li>
                    <li>畅销教辅推荐：精品套书50...</li>
                    <li>2021版法律硕士联考大纲75...</li>
                    <li>计算机新书畅销书75折抢购</li>
                    <li>2021年孩子最喜欢的书>></li>
                    <li>弗洛伊德作品精选集59折</li>
                </ul>
            </div>
            <div id="dome2"></div>
        </div>
    </div>

    <div class="layui-col-md8 layui-col-xs8" style="background-color: #beff9b;">
        <div class="layui-carousel" id="test1">
            <div carousel-item="">
                <li style="background:url(/img/lunbo/1.jpg);background-size: 100%"></li>
                <li style="background:url(/img/lunbo/2.jpg);background-size: 100%"></li>
                <li style="background:url(/img/lunbo/3.jpg);background-size: 100%"></li>
                <li style="background:url(/img/lunbo/4.jpg);background-size: 100%"></li>
                <li style="background:url(/img/lunbo/5.jpg);background-size: 100%"></li>
            </div>
        </div>
    </div>

    <div class="layui-col-md2 layui-col-xs2" style="height:360px;overflow: hidden;background-color: #ddd7d7">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;border-color: #3e0656;">
            <legend>热点新闻</legend>
        </fieldset>
        <div id="domex">
            <div id="dome1x">
                <ul>
                    <li style="color:red;">2010考研英语大纲到货75折...</li>
                    <li>权威定本四大名著（人民文...</li>
                    <li>口述历史权威唐德刚先生国...</li>
                    <li>袁伟民与体坛风云：实话实...</li>
                    <li>两岸关系这些年：轰动两岸...</li>
                    <li>畅销教辅推荐：精品套书50...</li>
                    <li>2021版法律硕士联考大纲75...</li>
                    <li>计算机新书畅销书75折抢购</li>
                    <li>2021年孩子最喜欢的书>></li>
                    <li>弗洛伊德作品精选集59折</li>
                </ul>
            </div>
            <div id="dome2x"></div>
        </div>
    </div>
    <script type="text/javascript">
        var domex;
        var dome;
        window.onload = function () {
            dome = document.getElementById("dome");
            var dome1 = document.getElementById("dome1");
            var dome2 = document.getElementById("dome2");
            dome1.style.height = dome.offsetHeight + "px";
            dome2.style.height = dome.offsetHeight + "px";
            dome2.innerHTML = dome1.innerHTML;
            dome.onmouseover = function () {
                window.clearInterval(timer);
            }
            dome.onmouseout = function () {
                timer = window.setInterval("start2x()", 40);
            }
            var timer = window.setInterval("start2x()", 40);
            //domex
            domex = document.getElementById("domex");
            var dome1x = document.getElementById("dome1x");
            var dome2x = document.getElementById("dome2x");
            dome1x.style.height = domex.offsetHeight + "px";
            dome2x.style.height = domex.offsetHeight + "px";
            dome2x.innerHTML = dome1x.innerHTML;
            domex.onmouseover = function () {
                window.clearInterval(timer2);
            }
            domex.onmouseout = function () {
                timer2 = window.setInterval("start2()", 40);
            }
            var timer2 = window.setInterval("start2()", 40);
        }

        function start2x() {
            if (dome.scrollTop == dome.offsetHeight) {
                dome.scrollTop = 0;
            } else {
                dome.scrollTop++;
            }
        }

        function start2() {
            if (domex.scrollTop == domex.offsetHeight) {
                domex.scrollTop = 0;
            } else {
                domex.scrollTop++;
            }
        }
    </script>
</div>

<script>
    function toThisEnt(ele) {
        location.assign("/toOrderInfo?id=" + ele)
    }

    function xianshi(e) {
        layer.tips($(e).text(), "#" + e.id, {
            tips: [
                Math.floor(Math.random() * 3) + 1,
                '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6)
            ]
        })
    }

    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1',
            width: '100%' //设置容器宽度
            ,
            height: '360px',
            arrow: 'hover' //始终显示箭头
            ,interval: 3000
        });
    });
</script>
<div class="layui-fluid">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;border-color: #3e0656;">
        <legend>最新发布</legend>
    </fieldset>
    <div class="layui-row"
         style="height: 30px;border-bottom: 1px solid #2b2767;padding: 10px;text-align: center;font-size: large;">
        <div class="layui-col-md2 layui-elip">委托类型</div>
        <div class="layui-col-md5 layui-elip">委托内容<i class="layui-icon" id="i" onmouseover="tip()">&#xe60b;</i></div>
        <div class="layui-col-md1 layui-elip">成交价</div>
        <div class="layui-col-md1 layui-elip">委托人</div>
        <div class="layui-col-md1 layui-elip">发布时间</div>
        <div class="layui-col-md1 layui-elip">最后期限</div>
        <div class="layui-col-md1">操作</div>
    </div>
    <div id="searchRongqi"></div>
</div>

<script th:inline="javascript" type="text/javascript">
    var entrustTypeList = /*[[${session.limitentrustTypeList}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var entrustDataList = /*[[${session.limitentrustDataList}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var entrustUserList = /*[[${session.limitentrustUserList}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var entrustIdList = /*[[${session.limitentrustIdList}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var entrustStartTime = /*[[${session.limitentrustStartTime}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var entrustEndTime = /*[[${session.limitentrustEndTime}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var entrustMoney = /*[[${session.limitentrustMoney}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var pages = /*[[${session.limitLeisureEntrustspages}]]*/2;
    layui.use('flow', function () {
        var flow = layui.flow;
        flow.load({
            elem: '#searchRongqi', //流加载容器
            scrollElem: '#searchRongqi',
            isAuto: true,
            isLazyimg: true,
            end: '到底了哦',
            done: function (page, next) {
                setTimeout(function () {
                    var lis = [];
                    var limit = 3;
                    if (page == pages) {
                        limit = entrustTypeList.length - limit * (page - 1);
                    }
                    if(pages==0){
                        limit=0;
                    }
                    for (var i = 0; i < limit; i++) {
                        lis.push(
                            '<div class="layui-row" style="height: 30px;border-bottom: 1px solid #2b2767;padding: 10px;text-align: center;font-size: large;">' +
                            '<div class="layui-col-md2 layui-elip" >' + entrustTypeList[eval((page - 1) * 3 + i)] + ':编号:' + entrustIdList[eval((page - 1) * 3 + i)] + '</div>' +
                            '<div id="data-' + eval((page - 1) * 3 + i) + '" class="layui-col-md5 layui-elip" onmouseover="xianshi(this)">' + entrustDataList[eval((page - 1) * 3 + i)] + '<i class="layui-icon">&#xe60b;</i></div>' +
                            '<div id="money-' + eval((page - 1) * 3 + i) + '" class="layui-col-md1 layui-elip" onmouseover="xianshi(this)">' + entrustMoney[eval((page - 1) * 3 + i)] + '</div>' +
                            '<div id="pname-' + eval((page - 1) * 3 + i) + '" class="layui-col-md1 layui-elip" onmouseover="xianshi(this)">' + entrustUserList[eval((page - 1) * 3 + i)] + '</div>' +
                            '<div id="ctime-' + eval((page - 1) * 3 + i) + '" class="layui-col-md1 layui-elip" onmouseover="xianshi(this)">' + entrustStartTime[eval((page - 1) * 3 + i)] + '</div>' +
                            '<div id="etime-' + eval((page - 1) * 3 + i) + '" class="layui-col-md1 layui-elip" onmouseover="xianshi(this)">' + entrustEndTime[eval((page - 1) * 3 + i)] + '</div>' +
                            '<div class="layui-col-md1" >' +
                            '<button class="layui-btn layui-btn-normal layui-btn-sm" onclick="toThisEnt(' + entrustIdList[eval((page - 1) * 3 + i)] + ')">可接单</button>' +
                            '</div>' +
                            '</div>'
                        )
                    }
                    next(lis.join(''), page < pages);
                }, 500);
            }
        });
    });
</script>
<!--帖子-->

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;border-color: #3e0656;">
    <legend>友情链接</legend>
</fieldset>
<br/>
<a href="">汉江水煮鱼&nbsp;&nbsp;</a>
<a href="">龙头山景区&nbsp;&nbsp;</a>
<a href="">汉江水煮鱼&nbsp;&nbsp;</a>
<a href="">龙头山景区&nbsp;&nbsp;</a>
<a href="">汉江水煮鱼&nbsp;&nbsp;</a>
<a href="">龙头山景区&nbsp;&nbsp;</a>
<a href="">汉江水煮鱼&nbsp;&nbsp;</a>
<a href="">龙头山景区&nbsp;&nbsp;</a>
<a href="">汉江水煮鱼&nbsp;&nbsp;</a>
<a href="">龙头山景区&nbsp;&nbsp;</a>
<a href="">汉江水煮鱼&nbsp;&nbsp;</a>
<a href="">龙头山景区&nbsp;&nbsp;</a>
<a href="">汉江水煮鱼&nbsp;&nbsp;</a>
<a href="">龙头山景区&nbsp;&nbsp;</a>
<a href="">汉江水煮鱼&nbsp;&nbsp;</a>
<a href="">龙头山景区&nbsp;&nbsp;</a>
<br/><br/>


</body>
</html>
